<template>
  <el-row :gutter="24" justify="center">
    <el-col :md="18" :sm="24" :xs="24">
      <el-card class="setting-card">
        <el-page-header @back="onBack" title="关闭" content="系统设置" :icon="CloseBold" class="header" />

        <el-tabs tab-position="left" class="demo-tabs">
          <!-- 模型设置 -->
          <el-tab-pane label="模型">
            <el-form label-width="100" label-position="left" class="form-body">
              <el-form-item label="模型调用">
                <el-select v-model="method" placeholder="选择调用方式" class="full-width">
                  <el-option label="ChatCUMT" value="local" />
                  <el-option label="第三方平台" value="remote" />
                </el-select>
              </el-form-item>

              <el-form-item label="平台" v-if="method === 'remote'">
                <el-select v-model="region" placeholder="选择第三方平台" class="full-width">
                  <el-option label="阿里云灵积" value="Ali_DashScope" />
                  <el-option label="讯飞星火" value="Xunfei_Spark" />
                  <el-option label="智谱AI" value="Zhipu_BigModel" />
                </el-select>
              </el-form-item>

              <el-form-item label="API Key" v-if="method === 'remote'">
                <el-input v-model="api_key" class="full-width" />
              </el-form-item>

              <el-form-item label="模型" v-if="method === 'remote'">
                <el-select v-model="model_name_model_version" placeholder="选择模型" class="full-width" @change="onChangeModel">
                  <el-option
                    v-for="x in model_list[region]"
                    :key="x.value"
                    :label="x.label"
                    :value="x.value"
                    :data-id="x.pre_group"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="多轮对话" prop="memory">
                <el-switch v-model="memory" />
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 通用设置 -->
          <el-tab-pane label="通用">
            <el-form label-width="100" label-position="left" class="form-body">
              <el-form-item label="系统主题">
                <el-segmented
                  v-model="theme"
                  :options="[
                    { label: '默认', value: 'tech' },
                    { label: '毛玻璃', value: 'glass' },
                    { label: '暗色', value: 'dark' },
                    { label: '亮色', value: 'light' }
                  ]"
                  class="theme-segmented"
                >
                  <template #default="{ item }">
                    <div class="flex flex-col items-center">
                      <div class="theme-icon">
                        <el-icon v-if="item.value === 'glass'"><Picture /></el-icon>
                        <el-icon v-if="item.value === 'dark'"><Moon /></el-icon>
                        <el-icon v-if="item.value === 'light'"><Sunny /></el-icon>
                        <el-icon v-if="item.value === 'tech'"><Cpu /></el-icon>
                      </div>
                      <div>{{ item.label }}</div>
                    </div>
                  </template>
                </el-segmented>
              </el-form-item>

              <el-form-item label="回答统计" prop="chat_detail">
                <el-switch v-model="chat_detail" />
              </el-form-item>

              <el-form-item>
                <el-button class="mt-2" type="warning">清空本地缓存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>


<script>
import {model_list} from "@/util/rule"
import {CloseBold, Picture} from "@element-plus/icons-vue";

export default {
    name: 'Setting',
    data() {
        return {
            // 可选的模型列表model_list写在util/rule.js中
            model_list: model_list,
        };
    },
    computed: {
        CloseBold() {
            return CloseBold
        },
        // 系统主题
        theme: {
            get() {
                return this.$store.state.setting.theme;
            },
            set(val) {
                document.body.className = val + '-theme';
                this.$store.dispatch('changeSetting', {
                    key: 'theme',
                    value: val
                })
            }
        },
        // 调用方法 local 本地 remote 远程
        method: {
            get() {
                return this.$store.state.setting.method;
            },
            set(val) {
                this.$store.dispatch('changeSetting', {
                    key: 'method',
                    value: val
                })
            }
        },
        // 调用平台
        region: {
            get() {
                return this.$store.state.setting.region;
            },
            set(val) {
                this.$store.dispatch('changeSetting', {
                    key: 'region',
                    value: val
                })
                // api平台更换时 把默认模型设置为平台内的第一个
                this.onChangeModel(this.model_list[val][0].value)
            }
        },
        // api_key
        api_key: {
            get() {
                return this.$store.state.setting.api_key;
            },
            set(val) {
                this.$store.dispatch('changeSetting', {
                    key: 'api_key',
                    value: val
                })
            }
        },
       // 是否多轮对话
        memory: {
            get() {
                return this.$store.state.setting.memory;
            },
            set(val) {
                this.$store.dispatch('changeSetting', {
                    key: 'memory',
                    value: val
                })
            }
        },
        // 是否显示回答统计
        chat_detail: {
            get() {
                return this.$store.state.setting.chat_detail;
            },
            set(val) {
                this.$store.dispatch('changeSetting', {
                    key: 'chat_detail',
                    value: val
                })
            }
        },
        // 模型名称和版本 拼接值 以能够显示在select中
        model_name_model_version: {
            get() {
                return this.$store.state.setting.model_name + ';' + this.$store.state.setting.model_version
            }
        }
    },
    methods: {
        onChangeModel(e) {
            // 获取选中项的 id
            const model = this.model_list[this.region].find(option => option.value === e);
            this.$store.dispatch('changeSetting', {
                key: 'pre_group',
                value: model.pre_group
            })
            this.$store.dispatch('changeSetting', {
                key: 'post_group',
                value: model.post_group
            })
            // 使用分号 ; 分割字符串
            let parts = e.split(';');
            this.$store.dispatch('changeSetting', {
                key: 'model_name',
                value: parts[0]
            })
            this.$store.dispatch('changeSetting', {
                key: 'model_version',
                value: parts[1]
            })
        },
        onBack() {
            // 返回首页
            this.$router.push('/');
        }
    }
}
</script>

<style scoped>
.setting-card {
  padding: 20px;
  border-radius: 10px;
  margin-top: 30px;
}

.header {
  margin-bottom: 20px;
}

.demo-tabs {
  margin-top: 20px;
}

.form-body {
  padding: 10px 10px 10px 0;
}

.full-width {
  width: 100%;
}

.theme-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

:deep(.el-page-header__content) {
  color: var(--chat-card-font-color);
}

:deep(.el-tabs__item)[aria-selected="false"] {
  color: var(--chat-card-font-color);
}
:deep(.el-tabs__item) {
  color: var(--el-text-color-primary); /* 设置默认字体颜色 */
  font-weight: 500;
}

:deep(.el-tabs__item.is-active) {
  color: var(--el-color-primary); /* 激活时字体颜色 */
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.05); /* 激活时背景微亮 */
  border-radius: 6px;
}

/* 确保未选中的标签可以看到文字 */
:deep(.el-tabs__item[aria-selected="false"]) {
  color: var(--el-text-color-secondary); /* 未选中时使用的字体颜色 */
}

/* 适配暗色和亮色主题的区别 */
body.tech-theme :deep(.el-tabs__item) {
  color: var(--chat-card-font-color); /* 亮色模式下 */
}

body.dark-theme :deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.75); /* 暗色模式下 */
}

body.dark-theme :deep(.el-tabs__item.is-active) {
  color: #fff; /* 暗色模式下激活标签颜色 */
}

body.light-theme :deep(.el-tabs__item) {
  color: rgba(0, 0, 0, 0.7); /* 亮色模式下标签颜色 */
}

body.light-theme :deep(.el-tabs__item.is-active) {
  color: #000; /* 亮色模式下激活标签颜色 */
}

/* 给左侧tab加背景区分 */
:deep(.el-tabs__nav.is-left) {
  background-color: rgba(255, 255, 255, 0.03);
  padding: 10px 0;
  border-radius: 8px;
}

</style>